<template>
  <div>
    <el-form class="elForm" :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
      <el-form-item>
        <el-button size="medium" class="backBtn" @click="$router.push({name: 'Exam'})">
          返回
        </el-button>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="dataForm.name" placeholder="姓名" size="medium" class="input" clearable="clearable" />
        <el-button class="search" size="small" @click="searchHandle()" icon="el-icon-search"></el-button>
      </el-form-item>
    </el-form>
    <el-table 
      :data="dataList" 
      border 
      v-loading="dataListLoading" 
      @selection-change="selectionChangeHandle" 
      style="width: 100%;" size="medium" 
      :header-cell-style="{borderColor: 'rgb(235,235,235)',background: 'rgb(247,247,247)'}" 
      :cell-style="{padding: '8px 0',borderColor: 'rgb(235,235,235)'}" 
      class="elTable" 
      :row-key="getRowKeys"
      @sort-change="sortChange"
      >
      <el-table-column prop="name" label="名字" min-width="140" />
      <el-table-column prop="role" label="职位" min-width="200" />
      <el-table-column prop="dept" label="部门" min-width="260" />
      <el-table-column 
        prop="totalScore" 
        label="总分" 
        :sortable="'custom'"
        min-width="140" />
      <el-table-column prop="rate" label="评级" min-width="175" />
      <el-table-column align="center" width="200" label="操作">
        <template #default="scope">
          <a 
            class="info-operation"
            @click="checkExamInfo(scope.row)">
            查看评分明细
          </a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination 
      @size-change="sizeChangeHandle" 
      @current-change="currentChangeHandle" 
      :current-page="pageIndex" 
      :page-sizes="[10, 20, 50]" 
      :page-size="pageSize" 
      :total="totalCount" 
      layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>

  </div>
</template>

<script>
import { beforeunloadHandler } from '../../utils/utils'
export default {
  data: function() {
    return {
      examId: null,
      dataForm: {
        name: null
      },
      dataList: [],
      status: 0, // 总分排序 0-无序  1-升序  2-降序
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      dataListLoading: false,
      dataListSelections: [],
      dataRule: {
        examName: [{ required: false, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$', message: '角色格式错误' }]
      }
    }
  },
  created() {
    this.examId = this.$route.params.id
    this.loadDataList()
    console.log(this.$route);
  },
  methods: {
    // 查看考核详情
    checkExamInfo(row) {
      this.$router.push({
        name: 'ExamCheckInfo', 
        query: {
          id: row.id, 
          person_id: row.person_id, 
          from: this.$route.name, 
          back_id: this.examId
        }
      })
    },
    // 查询功能
    searchHandle() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$refs['dataForm'].clearValidate()
          // 后端接收到''会报错，接收null是代表没有这个条件
          if (this.dataForm.title == '') {
            this.dataForm.title = null
          }
          if (this.pageIndex != 1) {
            this.pageIndex = 1
          }
          this.loadDataList()
        } else {
          return false
        }
      })
    },
    // 加载分页数据
    loadDataList() {
      this.dataListLoading = true
      let data = {
        page: this.pageIndex,
        length: this.pageSize,
        examId: this.examId,
        name: this.dataForm.name,
        status: this.status
      }
      console.log(data);
      this.$http('examinee/selectExamineeBypages', 'post', data, true, resp => {
        // console.log(resp);
        let {page} = resp
        let {list} = page
        console.log(list);
        
        this.dataList = []
        Object.keys(list).forEach((item, index) => {
          let listItem = list[item]
          let data = {
            id: listItem.exam_id,
            person_id: listItem.person_id,
            name: listItem.person_name,
            role: listItem.map.roles,
            dept: listItem.map.dept,
            totalScore: listItem.total_score,
            rate: listItem.rate
          }
          this.dataList[index] = data
        })
        this.totalCount = page.totalCount
        this.dataListLoading = false
      })
    },
    // 自定义排序
    sortChange(column, prop, order) {
      if (column.order == 'ascending') {
        this.status = 1
      } else if (column.order == 'descending') {
        this.status = 2
      } else {
        this.status = 0
      }
      this.loadDataList()
    },
    // 分页一页数量改变时触发
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.loadDataList()
    },
    // 分页换页时触发
    currentChangeHandle(val) {
      this.pageIndex = val
      this.loadDataList()
    },
    selectionChangeHandle: function(val) {
      this.dataListSelections = val
    },
    selectable: function(row, index) {
      // console.log(row)
      if (row.systemic || row.users > 0) {
        return false
      }
      return true
    },
    // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
    getRowKeys(row) {
      return row.id
    }
  },
  // mounted() {
  //   document.addEventListener('beforeunload', e => beforeunloadHandler(e))
  // }
}
</script>

<style lang="scss" scoped>
@import './examCheck.scss';
</style>
